import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15
import FluentUI 1.0

/**EMPatientTable.qml
  * 数据表格的渲染区域，外部设置一个宽高后，使用setDataArray
  * 设置渲染数据，外部使用itemClick监听点击事件
  *
  * 简单使用:
    EMPatientTable{
        width: parent.width
        height: parent.height

        onItemClick: (r1, r2, r3)=>{
            console.log(r1, r2, r3)
        }

        Component.onCompleted: {
            setDataArray([
                {patientName: "tacom", testId: "123", imageName: "jja.jpg", taskStatus: "0", errMsg: "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"},
                {patientName: "tacom", testId: "1223", imageName: "jj2.jpg", taskStatus: "0", errMsg: ""},
                {patientName: "tacom", testId: "12223", imageName: "1jj.jpg", taskStatus: "0", errMsg: ""},
                {patientName: "tacom", testId: "1224", imageName: "jj.jpg", taskStatus: "0", errMsg: ""},
                {patientName: "tacom", testId: "12223", imageName: "j3j.jpg", taskStatus: "0", errMsg: ""},
                {patientName: "tacom", testId: "12223", imageName: "j8j.jpg", taskStatus: "0", errMsg: ""},
                {patientName: "tacom", testId: "12223", imageName: "j74j.jpg", taskStatus: "0", errMsg: ""},
                {patientName: "tacom", testId: "12223", imageName: "j9j.jpg", taskStatus: "0", errMsg: ""},
                {patientName: "tacom", testId: "12223", imageName: "j6j.jpg", taskStatus: "0", errMsg: ""},
                {patientName: "tacom", testId: "12223", imageName: "j5j.jpg", taskStatus: "0", errMsg: ""},
                {patientName: "tacom", testId: "12223", imageName: "j20j.jpg", taskStatus: "0", errMsg: ""},
                {patientName: "tacom", testId: "12223", imageName: "jj.jpg", taskStatus: "0", errMsg: ""}
            ])
        }
    }
  */


Item {
    id:root
    property var dataArray: [] // 存储表格数据
    signal itemClick(string patientName, string testId, string imageName)

    // 初始化组件
    Component.onCompleted: {
        gagination.pageCurrent = 1
        gagination.itemCount = 1
    }

    // 交互部分的组件
    Component{
        id:com_action
        Item{
            RowLayout{
                anchors.centerIn: parent
                FluFilledButton{
                    text:"运算查询"
                    onClicked: {
                        var obj = tableModel.getRow(row)
                        root.itemClick(obj.patientName, obj.testId, obj.imageName)
                    }
                }
            }
        }
    }

    // 表格区域
    FluTableView{
        id:table_view
        anchors{
            left: parent.left
            right: parent.right
            top: parent.top
            bottom: gagination.top
        }
        columnSource:[
            {
                title: '患者姓名',
                dataIndex: 'patientName',
                readOnly: true,
                width:80,
            },
            {
                title: '检测编号',
                dataIndex: 'testId',
                width: 150,
                minimumWidth:100,
                maximumWidth:250
            },
            {
                title: '检测图像名称',
                dataIndex: 'imageName',
                width: 300,
                minimumWidth:200,
                maximumWidth: 350
            },
            {
                title: '执行状态',
                dataIndex: 'taskStatus',
                width: 80
            },
            {
                title: '错误信息',
                dataIndex: 'errMsg',
                width:100,
                minimumWidth:100,
                maximumWidth:300
            },
            {
                title: '操作',
                dataIndex: 'action',
                width:160,
                minimumWidth:160,
                maximumWidth:160
            }
        ]
    }

    // 换页导航
    FluPagination{
        id:gagination
        anchors{
            bottom: parent.bottom
            bottomMargin: 20
        }
        pageCurrent: 1  // 当前第几面
        itemCount: 100  // 总数
        pageButtonCount: 10  // 每一面需要展示的数据
        __itemPerPage: 10
        onRequestPage:
            (page,count)=> {
                table_view.closeEditor()
                // console.log(page, count)
                loadDataFromCache(page,count)  // 点击后，冲缓冲中读取数据
                table_view.resetPosition()
            }
    }

    function setDataArray(dArray){
        // 写入全局缓冲
        dataArray = dArray

        // 设置组建相关参数
        gagination.pageCurrent = 1
        gagination.itemCount = dArray.length

        // 设置数据
        loadDataFromCache(1, 10)
    }

    function loadDataFromCache(page, count){
        // 读取全局缓冲的[(page - 1) * count, page * count]
        const dataSlice = dataArray.slice((page - 1) * count, page * count)

        // 格式转换到列表可读格式
        const dataSource = []
        for(let i = 0; i < dataSlice.length; i++){
            const o = dataSlice[i]
            dataSource.push({
                patientName: o.patientName,
                testId: o.testId,
                imageName: o.imageName,
                taskStatus: o.taskStatus,
                errMsg: o.errMsg,
                action: table_view.customItem(com_action)
            })
        }

        // 设置数据源
        table_view.dataSource = dataSource
    }
}
